<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改产品溯源')" />
    <th:block th:include="include :: bootstrap-fileinput-css" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-traceability-edit" th:object="${jtProductTraceability}">
        <input name="traceabilityId" th:field="*{traceabilityId}" type="hidden">
        <div class="row">
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label is-required">[[#{traceabilityCode}]]：</label>
                    <div class="col-sm-8">
                        <input name="traceabilityCode" th:field="*{traceabilityCode}" class="form-control" type="text" required>
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">[[#{productionBatch}]]：</label>
                    <div class="col-sm-8">
                        <input name="productionBatch" th:field="*{productionBatch}" class="form-control" type="text">
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">[[#{productionDate}]]：</label>
                    <div class="col-sm-8">
                        <input name="productionDate" th:value="${#dates.format(jtProductTraceability.productionDate, 'yyyy-MM-dd')}" class="time-input form-control" th:placeholder="#{productionDate}" type="text">
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">[[#{executiveStandard}]]：</label>
                    <div class="col-sm-8">
                        <input name="executiveStandard" th:field="*{executiveStandard}" class="form-control" type="text">
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">[[#{guaranteePeriod}]]：</label>
                    <div class="col-sm-8">
                        <input name="guaranteePeriod" th:field="*{guaranteePeriod}" class="form-control" type="text" th:placeholder="#{guaranteePeriodExample}">
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">[[#{countryOfOrigin}]]：</label>
                    <div class="col-sm-8">
                        <input name="countryOfOrigin" th:field="*{countryOfOrigin}" class="form-control" type="text">
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">[[#{productionQualification}]]：</label>
                    <div class="col-sm-8">
                        <input name="productionQualification" th:field="*{productionQualification}" class="form-control" type="text">
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">[[#{salesTerritory}]]：</label>
                    <div class="col-sm-8">
                        <input name="salesTerritory" th:field="*{salesTerritory}" class="form-control" type="text">
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">[[#{serviceCall}]]：</label>
                    <div class="col-sm-8">
                        <input name="countryCode" th:field="*{countryCode}" class="input-line" type="number" maxlength="5" th:placeholder="#{countryCode}" style="width: 70px;">
                        <span>-</span>
                        <input name="phoneNumber" th:field="*{phoneNumber}" class="input-line" maxlength="11" type="number" placeholder="#{phoneNumber}" style="width: 120px;">
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">[[#{serviceInfo}]]：</label>
                    <div class="col-sm-8">
                        <input name="serviceInfo" th:field="*{serviceInfo}" class="form-control" type="text">
                    </div>
                </div>
            </div>
            <div class="col-xs-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">[[#{status}]]：</label>
                    <div class="col-sm-8">
                        <div class="radio-box" th:each="dict : ${@dict.getType('sys_normal_disable')}">
                            <input type="radio" th:id="${'status_' + dict.dictCode}" name="status" th:value="${dict.dictValue}" th:field="*{status}">
                            <label th:for="${'status_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <div class="row">
        <div class="col-sm-12">
            <div class="tabs-container">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">[[#{inspectionReport}]][[#{image}]]</a>
                    </li>
                    <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">[[#{inspectionReport}]]</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div id="tab-1" class="tab-pane active">
                        <div class="panel-body">
                            <!--报告图-->
                            <div class="ibox-title">
                                <h5>[[#{image}]] <small></small></h5>
                            </div>
                            <div class="ibox-content">
                                <div class="file-loading">
                                    <input id="fileinput-img" name="file" type="file" accept="image/*" multiple="multiple" data-max-file-count="5">
                                </div>
                                <span><i class="fa fa-info-circle"></i>[[#{uploadImageTips}]]</span>
                            </div>
                        </div>
                    </div>
                    <div id="tab-2" class="tab-pane">
                        <div class="panel-body">
                            <!--检测报告-->
                            <div class="ibox-content">
                                <div class="file-loading">
                                    <input id="fileinput-file" name="file" type="file"  accept="application/pdf" data-max-file-count="5">
                                </div>
                                <span><i class="fa fa-info-circle"></i>[[#{uploadFileTips}]]</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: bootstrap-fileinput-js" />
<script th:inline="javascript">
    var prefix = ctx + "business/traceability";
    $("#form-traceability-edit").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/edit", $('#form-traceability-edit').serialize());
        }
    }
</script>

<script th:inline="javascript">
    var imgData = [[${imgInfo}]]
    var fileData = [[${fileInfo}]]
    var uploadImageUrl = prefix + "/upload/file";
    var deleteImageUrl = prefix +"/deleteFile";
    var traceabilityId = [[${jtProductTraceability.traceabilityId}]]

    $(document).ready(function () {
        initFileInput();

        initSingleFileInput();
    });

    //多文件上传 图片
    function initFileInput() {
        $("#fileinput-img").fileinput({
            theme: 'explorer-fas',
            uploadUrl: uploadImageUrl,
            uploadAsync: true,
            allowedFileType : ['image'],
            allowedFileExtensions : ['jpg','jpeg','png','gif'],
            previewFileType :'image',
            maxFileSize: (1024 * 10),
            maxFileCount: 5,
            deleteUrl: deleteImageUrl +"/1",
            overwriteInitial: false,
            initialPreviewAsData: true,
            initialPreviewFileType: 'image',
            initialPreview: imgData.url,
            initialPreviewConfig: imgData.config
        }).on('filebatchselected', function (event, data, id, index) {
            $(this).fileinput("upload"); //选择后自动上传事件
        }).on("fileuploaded", function (event, data, previewId, index) {
            //console.log("data:"+data);
            //console.log(previewId);
            if(data.response.code == 0){
                var formData = new FormData();
                formData.append('type', 2);
                formData.append('traceabilityId', traceabilityId);
                formData.append('reportImageUrl', data.response.fileName);
                postRequest(prefix + "/upload/save/report", formData, previewId);
            } else {
                console.log("code:"+data.response.code +"  msg:"+data.response.msg);
                $.modal.alertWarning(data.response.msg)
            }
        }).on("filesuccessremove",function (event, previewId, extra) {
            if(confirm(i18n('confirmDeleteImageTips'))){
                //这里可以调用接口删除服务器原文件
                //console.log("@==="+previewId);
                //console.log(extra);

                var imgId = $("#input_"+previewId).val();
                if(imgId != undefined){
                    var formData = new FormData();
                    formData.append('key', imgId);
                    postRequest(deleteImageUrl, formData);
                }
            } else {
                return false;
            }
        }).on('filesorted', function(e, params) {
            //console.log('File sorted params', params);
            console.log('File sorted ', params.previewId, params.oldIndex, params.newIndex, params.stack);
            var keyArr = [];
            for(imgInfo of params.stack){
                keyArr.push(imgInfo.key);
            }
            var data = {"ids":keyArr.join()};
            $.operate.post(prefix + "/save/file/sort", data);
        });
    }


    //单文件上传  检测报告
    function initSingleFileInput() {
        $("#fileinput-file").fileinput({
            theme: 'explorer-fas',
            uploadUrl: uploadImageUrl,
            previewFileType :'pdf',
            maxFileSize: (1024 * 30),
            maxFileCount: 5,
            deleteUrl: deleteImageUrl +"/2",
            uploadAsync: true,
            allowedFileExtensions:['pdf'],
            overwriteInitial: false,
            initialPreviewAsData: true,
            initialPreviewFileType: 'pdf',
            initialPreview: fileData.url,
            initialPreviewConfig: fileData.config
        }).on('filebatchselected', function (event, data, id, index) {
            $(this).fileinput("upload"); //选择后自动上传事件

        }).on("fileuploaded", function (event, data, previewId, index) {
            //console.log(previewId);

            if(data.response.code == 0){
                var formData = new FormData();
                formData.append('traceabilityId', traceabilityId);
                formData.append('testReportUrl', data.response.fileName);
                postRequest(prefix + "/upload/save/report", formData, previewId);
            } else {
                console.log("code:"+data.response.code +"  msg:"+data.response.msg);
                $.modal.alertWarning(data.response.msg)
            }

        }).on("filesuccessremove",function (event, previewId, extra) {
            if(confirm(i18n('confirmDeleteFileTips'))){
                //这里可以调用接口删除服务器原文件
                //console.log("@==="+previewId);
                //console.log(extra);

                var imgId = $("#input_"+previewId).val();
                if(imgId != undefined) {
                    var formData = new FormData();
                    formData.append('key', imgId);
                    postRequest(delFileUrl, formData);
                }
            } else {
                return false;
            }
        });
    }

    var that = this;
    //post请求
    function postRequest(url, formData, previewId) {
        $.ajax({
            url: url,
            type: 'post',
            cache: false,
            data: formData,
            processData: false,
            contentType: false,
            dataType: "json",
            success: function(result) {
                if (typeof callback == "function") {
                    callback(result);
                }
                if (result.code == that.web_status.SUCCESS) {
                    $.modal.msgSuccess(result.msg);
                    addImgInfo(previewId, result.imgId);

                } else if (result.code == that.web_status.WARNING) {
                    $.modal.alertWarning(result.msg)
                } else {
                    $.modal.alertError(result.msg);
                }
            }
        });
    }

    function addImgInfo(previewId, imgId) {
        if(previewId != undefined && previewId != null){
            $("#fileinput-img").before("<input name=\"imgId\" id='input_"+previewId+"' value='"+imgId+"' type=\"hidden\">")
        }
    }
</script>
</body>
</html>